<template>
  <div>
    <table border="1">
      <tr>
        <th>欢迎光临wue开发的收银系统水果店</th>
      </tr>
      <tr>
        <td>苹果{{ price }}￥/斤,折扣&lt;{{ 8 }}折&gt;</td>
      </tr>
      <tr>
        <td>
          请输入你要购买的斤数 <input type="text" name="" id="" v-model="num" />
        </td>
      </tr>
      <tr>
        <td><button @click="jisuan">结账买单</button></td>
      </tr>
      <tr>
        <td>
          结账单:总价:{{ Before }}￥元折后价:{{ after }}￥省了:{{ num1 }}￥元
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: 'Day02App',

  data() {
    return {
      price: 10,
      discount: 8,
      Before: '',
      after: '',
      num: '',
      num1: ''
    }
  },
  methods: {
    jisuan() {
      this.Before = this.price * this.num
      this.after = this.price * this.num * (this.discount / 10)
      this.num1 = this.Before - this.after
    }
  }
}
</script>

<style lang="scss" scoped></style>
